import React, { useRef, useState, useEffect } from 'react'
import { View, Text, StyleSheet, SafeAreaView, Image, Share, Clipboard, TouchableHighlight, Dimensions } from 'react-native'
import { connect } from 'react-redux'
import { pTx } from '../../utils/dimensions';
import { Toast } from '@ant-design/react-native'
import { useRealm, useQuery } from '@realm/react'
import { schemaName } from "../../realm"
import LinearGradient from 'react-native-linear-gradient';
import { QRCodeImg } from "qrcode-react-native";
const CollectionCode = () => {
    const wallet = useQuery(schemaName.Wallet, wallet => {
        return wallet.filtered('current = true');
    })[0];
    const copyToClipboard = () => {
        Clipboard.setString(wallet.address)
        Toast.info('复制成功')
    }
    const onShare = async () => {
        try {
            const result = await Share.share({
                message:
                    wallet.address,
            });
            if (result.action === Share.sharedAction) {
                if (result.activityType) {
                    // shared with activity type of result.activityType
                } else {
                    // shared
                }
            } else if (result.action === Share.dismissedAction) {
                // dismissed
            }
        } catch (error) {
            alert(error.message);
        }
    };
    return (
        <LinearGradient
            colors={['rgba(51, 225, 144, 1)', 'rgba(68, 225, 240, 1)']}
            start={{ x: 0.25, y: 0.25 }}
            end={{ x: 0.75, y: 0.75 }}
            style={styles.linearGradient}
        >
            <SafeAreaView>
                <View style={styles.page}>
                    <View style={styles.block}>
                        <View style={styles.warn}>
                            <Image style={styles.icon} source={require('../../assets/image/icon22.png')}></Image>
                            <Text style={styles.warnText}>仅向该地址转入BSC/BEP20相关资产 </Text>
                        </View>
                        <View style={styles.codeBlock}>
                            <QRCodeImg
                                codeValue={wallet.address}
                                size={Number(pTx(248).toFixed(0))}
                                errorCorrectLevel="Q"
                            />
                        </View>
                        <View style={styles.addressBox}>
                            <Text style={styles.styleText}>收款地址</Text>
                            <Text style={styles.address}>{wallet.address}</Text>
                        </View>
                        <View style={styles.footButton}>
                            <TouchableHighlight
                                onPress={onShare}
                                style={[styles.openButton, styles.borderRight]}
                                underlayColor="rgba(0,0,0,0.1)"
                            >
                                <Text style={styles.label}>分享</Text>
                            </TouchableHighlight>
                            <TouchableHighlight
                                style={styles.openButton}
                                onPress={copyToClipboard}
                                underlayColor="rgba(0,0,0,0.1)"
                            >
                                <Text style={[styles.label]}>复制</Text>
                            </TouchableHighlight>
                        </View>
                    </View>
                </View>
                <Text style={styles.Tweet}>Tweet</Text>

            </SafeAreaView>
        </LinearGradient>

    )
}

const mapStateToProps = (state) => (state.wallet)

const mapDispatchToProps = {}

export default connect(mapStateToProps, mapDispatchToProps)(CollectionCode)


const styles = StyleSheet.create({
    linearGradient: {
        flex: 1,
        paddingHorizontal: pTx(32)
    },
    page: {
        minHeight: Dimensions.get('screen').height - pTx(220),
    },
    block: {
        paddingHorizontal: pTx(15),
        borderRadius: pTx(10),
        backgroundColor: "#fff"
    },
    warn: {
        marginTop: pTx(20),
        paddingVertical: pTx(12),
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
        borderRadius: pTx(6),
        backgroundColor: "rgba(251,114,26,0.1)",
    },
    warnText: {
        fontSize: pTx(12),
        color: "#FB721A"
    },
    icon: {
        marginRight: pTx(8),
        width: pTx(12),
        height: pTx(12),
    },
    codeBlock: {
        marginTop: pTx(12),
        paddingVertical: pTx(12),
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
        borderRadius: pTx(10),
        backgroundColor: "rgba(68, 225, 240, 0.1)",
    },
    addressBox: {
        padding: pTx(15),
        marginTop: pTx(12),
        borderRadius: pTx(6),
        backgroundColor: "rgba(247, 247, 247, 1)",
        textAlign: "center"
    },
    styleText: {
        textAlign: "center",
        fontSize: pTx(12),
        color: "rgba(175, 181, 189, 1)"
    },
    address: {
        marginTop: pTx(4),
        textAlign: "center",
        fontSize: pTx(13),
        color: "rgba(10, 12, 20, 1)"
    },

    footButton: {
        marginVertical: pTx(10),
        flexDirection: 'row',
        justifyContent: "space-between",
        alignItems: "center",
    },
    openButton: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
        height: pTx(35),
    },
    borderRight: {
        borderRightWidth: 1,
        borderRightColor: "rgba(0,0,0,0.03)",
    },
    label: {
        fontSize: pTx(16),
    },
    Tweet: {
        marginTop: pTx(20),
        textAlign: "center",
        fontSize: pTx(28),
        fontWeight: "bold",
        color: "rgba(255, 255, 255, 1)"
    }
})